<!-- 按钮群  -->
<template>
  <div id="button-group-main">
    <div v-for="item in buttons" class="router-button" :ref="item.ref"  :style="item.style"
         @click="menuClick(item.id)" @mouseover="mouseEnter(item.id)" @mouseleave="mouseLeave(item.id)">
      <div class="button-txt" :style="item.fontStyle" >
        {{item.caption}}
      </div>
    </div>
  </div>
</template>
<script>
import ssdd1 from "@/view/Home/Moudle/FullScreen1/img/button/ssdd-1.png";
import spqg1 from "@/view/Home/Moudle/FullScreen1/img/button/spqg-1.png";
import lskj1 from "@/view/Home/Moudle/FullScreen1/img/button/lskj-1.png";
import sqkl1 from "@/view/Home/Moudle/FullScreen1/img/button/sqkl-1.png";
import djbb1 from "@/view/Home/Moudle/FullScreen1/img/button/djbb-1.png";
import bjkl1 from "@/view/Home/Moudle/FullScreen1/img/button/bjkl-1.png";
import znaikl1 from "@/view/Home/Moudle/FullScreen1/img/button/znaikl-1.png";
import ssdd0 from "@/view/Home/Moudle/FullScreen1/img/button/ssdd-0.png";
import spqg0 from "@/view/Home/Moudle/FullScreen1/img/button/spqg-0.png";
import lskj0 from "@/view/Home/Moudle/FullScreen1/img/button/lskj-0.png";
import sqkl0 from "@/view/Home/Moudle/FullScreen1/img/button/sqkl-0.png";
import djbb0 from "@/view/Home/Moudle/FullScreen1/img/button/djbb-0.png";
import bjkl0 from "@/view/Home/Moudle/FullScreen1/img/button/bjkl-0.png";
import znaikl0 from "@/view/Home/Moudle/FullScreen1/img/button/znaikl-0.png";
import AuthCheck from '@/api/AuthCheck';
export default {
  data(){
    return{
      buttons:[
        {id:1,ref:"button1",disabled:false,caption:this.$t('command_dispatch'),style:{background: "url("+ssdd1+")"},fontStyle:{color:'#84e8d7'}},//"指挥调度"
        {id:2,ref:"button2",disabled:false,caption:this.$t('video_monitoring'),style:{background: "url("+spqg1+")"},fontStyle:{color:'#84e8d7'}},//"视频监控"
        {id:3,ref:"button3",disabled:false,caption:this.$t('historical_track'),style:{background: "url("+lskj1+")"},fontStyle:{color:'#84e8d7'}},//"历史轨迹"
        {id:4,ref:"button4",disabled:false,caption:this.$t('data_manage'),style:{background: "url("+sqkl1+")"},fontStyle:{color:'#84e8d7'}},//"信息管理"
        {id:5,ref:"button5",disabled:false,caption:this.$t('statistics_report'),style:{background: "url("+djbb1+")"},fontStyle:{color:'#84e8d7'}},//"统计报表"
        {id:6,ref:"button6",disabled:false,caption:this.$t('alarm_manage'),style:{background: "url("+bjkl1+")"},fontStyle:{color:'#84e8d7'}},//"报警管理"
        {id:7,ref:"button7",disabled:true,caption:this.$t('ai_manage'),style:{background: "url("+znaikl1+")"},fontStyle:{color:'#5c5c5c'}},//"智能AI管理"
      ],
      url1:[ssdd1,spqg1,lskj1,sqkl1,djbb1,bjkl1,znaikl1]
      //authCheck: new AuthCheck(),
    }
  },
  methods:{
    menuClick(index){
      if (this.buttons[index-1].disabled){
        return;
      }

      //先退出全屏
      this.exitFullScreen();

      if (index === 1){
        /** 指挥调度 */
        this.$router.push('/commandDispatch');
      }else if (index === 2){
        this.$router.push('/multiScreenPlay');
      }else if (index === 3){
        /** 历史回放 */
        this.$router.push('/moveTrackPlay');
      }else if (index === 4){
        /** 数据管理 */
        this.$router.push('/data_main');

      }else if (index === 5){
        this.$router.push('/statistics');
        /** 数据统计 */
      }else if (index === 6){
        this.$router.push('/alarmManage');
        /** 报警管理 */
      }else if (index === 7){
        /** 智能AI管理 */
      }
    },
    mouseEnter(index){

      let pic = ssdd0;
      if (index === 1) {
        pic = ssdd0
      }else if(index === 2) {
        pic = spqg0
      }else if(index === 3) {
        pic = lskj0
      }else if(index === 4) {
        pic = sqkl0
      }else if(index === 5) {
        pic = djbb0
      }else if(index === 6) {
        pic = bjkl0
      }else if(index === 7) {
        pic = znaikl0
      }
      if (!this.buttons[index-1].disabled){
        this.buttons[index-1].style={
          background: "url("+pic+")",
          backgroundSize: "100% 100%",
          cursor: "pointer",
        };
        this.buttons[index-1].fontStyle={
          color: '#5c5c5c',
          cursor: "pointer",
        };
      }else{
        this.buttons[index-1].style['cursor']="default";
        this.buttons[index-1].fontStyle['cursor']="default";
      }

    },
    mouseLeave(index){
      //console.log(">>>>>>> mouseLeave : %o",index);
      let pic = ssdd1;
      if (index === 1) {
        pic = ssdd1
      }else if(index === 2) {
        pic = spqg1
      }else if(index === 3) {
        pic = lskj1
      }else if(index === 4) {
        pic = sqkl1
      }else if(index === 5) {
        pic = djbb1
      }else if(index === 6) {
        pic = bjkl1
      }else if(index === 7) {
        pic = znaikl1
      }

      if (!this.buttons[index-1].disabled){
        this.buttons[index-1].style={
          background: "url("+pic+")",
          backgroundSize: "100% 100%",
          cursor: "default",
        };
        this.buttons[index-1].fontStyle={
          color: '#84e8d7',
          cursor: "default",
        };
      }else{
        this.buttons[index-1].style['cursor']="default";
        this.buttons[index-1].fontStyle['cursor']="default";
      }

    },
    exitFullScreen(){
      if (document.exitFullScreen) {
        console.log("退出全屏 exitFullScreen")
        document.exitFullscreen()
      }
      //兼容火狐
      //console.log(document.mozExitFullScreen)
      if (document.mozCancelFullScreen) {
        console.log("退出全屏 mozCancelFullScreen")
        document.mozCancelFullScreen()
      }
      //兼容谷歌等
      if (document.webkitExitFullscreen) {
        console.log("退出全屏 webkitExitFullscreen")
        document.webkitExitFullscreen()
      }
      //兼容IE
      if (document.msExitFullscreen) {
        console.log("退出全屏 msExitFullscreen")
        document.msExitFullscreen()
      }
    },
  },
  mounted() {
    const authCheck = new AuthCheck()
    this.$nextTick(()=>{
      this.buttons[0].disabled = !authCheck.commandDispatch();
      this.buttons[1].disabled = !authCheck.multiScreenPlay();
      this.buttons[2].disabled = !authCheck.moveTrackPlay();
      this.buttons[3].disabled = !authCheck.dataMain();
      this.buttons[4].disabled = !authCheck.statistics();
      this.buttons[5].disabled = !authCheck.alarmManage();

      //console.log(">>>>>>> ButtonGroup.mounted() buttons=%o",this.buttons);
      let i=0;
      this.buttons.forEach(item=>{
        //console.log(item);
        if (item.disabled){
          item.style={
            background: "url("+this.url1[i]+")",
            backgroundSize: "100% 100%",
            cursor: "pointer",
          };
          item.fontStyle={
            color: '#5c5c5c',
            cursor: "pointer",
          };
        }else{
          item.style['cursor']="default";
          item.fontStyle['cursor']="default";
          item.fontStyle['color']="#84e8d7";
        }
        i++;
      })

    });

  }
}
</script>

<style lang="less">
#button-group-main{
  width: 100%;
  height: 100%;
  display: flex;
//justify-content: center;
  justify-content:space-evenly;
  align-items: center;
  flex-wrap: wrap;
  .router-button {
    width: 114px;
    height: 79px;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    cursor: pointer;

    .button-txt {
      font-size: 16px;
      margin-bottom: 5px;
      color: #a64bf4;
      cursor: pointer;
    }
  }
}
</style>

